<template>
    <div class="singer">
        <ul class="singer-header">
            <li v-for="(item,index) in singerStyle" :key="index" @click="handleChangeView(item)"
                :class="{active:item.name==activeName}">
                {{item.name}}
            </li>
        </ul>
        <div>
            <content-list :contentList="albumDatas"></content-list>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
                        :current-page="currentPage" :page-size="pageSize" :total="title">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import ContentList from '../components/ContentList';
import {getAllSinger,getSingerOfSex} from '../api/index';
import {mixin} from "../mixins";
import {singerStyle} from '../assets/data/singer';
import {getAllFoodsByPaging,getTheQuantityOfAllDishes,getFoodsByTypeAndPage,getNumberByType} from "../api/food";

export default {
    name: 'singer',
    components:{
        ContentList
    },
    data(){
        return{
            albumDatas: [],      //歌手数据
            pageSize: 15,        //页面大小，一页有15条数据
            currentPage: 1,      //当前页，默认第一页
            singerStyle: [],           //风格
            activeName: '全部菜品' ,   //当前风格
            title:0,
            typeId:0,
        }
    },
    computed:{
        //计算当前表格中的数据
        data(){
            // return this.albumDatas.slice((this.currentPage - 1)*this.pageSize,this.currentPage*this.pageSize)
        }
    },
    mounted(){
        this.singerStyle = singerStyle;
        this.getSingerList();
        this.getAllSp();
    },

    methods:{
        getSingerList(){
          //分页获取食物
          if (this.activeName == "全部菜品"){
           getAllFoodsByPaging(this.currentPage,15).then(res=>{
            this.albumDatas = res.data.obj;
            this.getAllSp();
          })}else if(this.activeName == "热销菜品"){
            getFoodsByTypeAndPage(0,this.currentPage,15).then(res=>{
              this.albumDatas = res.data.obj;
            })
            getNumberByType(this.typeId).then(res=>{
              this.title = res.data.obj;
            })
          }else if(this.activeName == "滞销菜品"){
            getFoodsByTypeAndPage(1,this.currentPage,15).then(res=>{
              this.albumDatas = res.data.obj;
          })
            getNumberByType(this.typeId).then(res=>{
              this.title = res.data.obj;
            })
          }else {
            console.log("参数传递错误")
        }

        },
        //获取当前页
        handleCurrentChange(val){
            this.currentPage = val;
            this.getSingerList();
        },
        //根据是否热销查询菜品
        handleChangeView(item){
          this.currentPage = 1;
            this.activeName = item.name;
            this.albumDatas = [];
            if(item.name == '全部菜品'){
                this.getSingerList();
                this.getAllSp();
            }else{
                if (item.name=='热销菜品'){
                  this.typeId = 0;
                  getFoodsByTypeAndPage(this.typeId,this.currentPage,15).then(res=>{
                    this.albumDatas = res.data.obj;
                  })
                  getNumberByType(this.typeId).then(res=>{
                    this.title = res.data.obj;
                  })
                }else {
                  this.typeId = 1;
                  getFoodsByTypeAndPage(this.typeId,this.currentPage,15).then(res=>{
                    this.albumDatas = res.data.obj;
                  })
                  getNumberByType(this.typeId).then(res=>{
                    this.title = res.data.obj;
                  })
                }

            }
        },
      //获取所有食物的数量
        getAllSp(){
          getTheQuantityOfAllDishes().then(res=>{
              this.title = res.data.obj;
            })
        },

    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/singer.scss';
</style>
